<template>
  <!-- <div>当前访问的路经地址是： {{ $route.fullPath }}</div> -->

  <!-- <div>{{ $router.options.routes }}</div>
  <div v-for="item in $router.options.routes">
    {{ item.name }}-- {{ item.meta.title }}
  </div> -->
  <div class="menu">
    <img src="./assets/BC.png" alt="" width="20" height="25">
    <a href="#">网易云音乐</a> &nbsp; &nbsp;
    <!--router 访问链接-->
    <RouterLink to="/">首页</RouterLink> &nbsp;
    <RouterLink to="/find">发现音乐</RouterLink> &nbsp;
    <RouterLink to="/my">我的音乐</RouterLink> &nbsp;
    <RouterLink to="/friend">关注</RouterLink> &nbsp;
    <RouterLink to="/musician">音乐人</RouterLink> &nbsp;
    <RouterLink to="/moveshop">移动端首页</RouterLink>
  </div>


  <!--路由的出口 关键字RouterView 只在根目录中展示，因为所有的路由都要再app中输出
  总结： 路由出口的只在要展示页面内出现， 哪个页面需要引入路由页面就在哪个vue中加入路由出口
  -->
  <RouterView></RouterView>

</template>

<script setup>
import { RouterView } from 'vue-router';






</script>

<style scoped>

a{
  text-decoration: none;
  color: white;
  font-size: 20px;
  font-weight: 800;
  line-height: 40px;
}
.menu{
  background-color: black;
  padding: 0px;
  height: 40px;
  img{
    margin-top: 3px;
  }
}
</style>